<template>
    <div class="wrap" id="wrap">
        <div class="logGet">
            <!-- 头部提示信息 -->
            <div class="logD logDtip">
                <p class="p1">微博舆情监控平台</p>
            </div>
            <!-- 输入框 -->
            <div class="lgD">
              <img src="../../assets/user1.png" width="20" height="20" alt="" />
                <input type="text" placeholder="输入用户名" v-model="userName"/>
            </div>
            <div class="lgD">
              <img src="../../assets/user2.png" width="20" height="20" alt="" />
                <input type="text" placeholder="输入用户密码" v-model="password"/>
            </div>
            <div class="logC">
                <el-button type="primary" round @click="login" :plain="true">登 录</el-button>
                <el-button type="info" round @click="ToRegister">注册</el-button>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            login() {
                if (!this.userName) {
                    this.$message.error('请输入用户名');
                    return;
                }
                if (!this.password) {
                    this.$message.error('请输入密码');
                    return;
                }



　　　　　　　　　　// 假设登陆成功，则跳转到 index 组件
                this.$router.push('/start');
              this.$message('登录成功');
            },
            ToRegister(){
                this.$router.push('/register');
            }
        }
    }
</script>

<style>
    body {
        background-image: url(../../assets/001.jpg);
        height: 750%;
        width: 75%;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;

    }

    * {
        margin: 0;
        padding: 0;
    }

    #wrap {
        height: 600px;
        width: 100%;
        background-position: center center;
        position: relative;

    }

    #head {
        height: 100px;
        width: 100px;
        background-color: #66CCCC;
        text-align: center;
        position: relative;
    }

    #wrap .logGet {
        height: 350px;
        width: 368px;
        position: absolute;
        background-color: #FFFFFF;
        top: 100px;
        right: 15%;
    }

    .logC a button {
        width: 50%;
        height: 45px;
        background-color: #ee7700;
        border: none;
        color: white;
        font-size: 18px;
    }

    .logGet .logD.logDtip .p1 {
         display: inline-block;
        font-size: 25px;
         margin-top: 30px;
        width: 86%;
      background-color: transparent;
    }

    #wrap .logGet .logD.logDtip {
        width: 86%;
        /*border-bottom: 1px solid #ee7700;*/
        margin-bottom: 10px;
        margin-top: 20px;
        margin-right: auto;
        margin-left: auto;
    }

    .logGet .lgD img {
        position: absolute;
        top: 12px;
        left: 8px;
    }

    .logGet .lgD input {
        width: 100%;
        height: 42px;
        text-indent: 2.5rem;
    }

    #wrap .logGet .lgD {
        width: 86%;
        position: relative;
        margin-bottom: 30px;
        margin-top: 30px;
        margin-right: auto;
        margin-left: auto;
    }

    #wrap .logGet .logC {
        width: 86%;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }


    .title {
        font-family: "宋体";
        color: #FFFFFF;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* 使用css3的transform来实现 */
        font-size: 36px;
        height: 40px;
        width: 30%;
    }

    .copyright {
        font-family: "宋体";
        color: #FFFFFF;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* 使用css3的transform来实现 */
        height: 60px;
        width: 40%;
        text-align: center;
    }

</style>
